<template>
  <div class="filter-container">
    <el-card class="box-card" shadow="always">
      <template #header>
        <div class="card-header">
          <span>选择:&nbsp;&nbsp;&nbsp;</span>
          <el-tag
            v-for="tag in selectedTagsId"
            :key="tag"
            closable
            type="warning"
            @close="removeTag(tag)"
            style="margin-right: 10px"
          >
            {{ getContent(tag) }}
          </el-tag>
          <el-button type="success" style="float: right" size="small" @click="handleFilter">筛选</el-button>
        </div>
      </template>
      <el-skeleton :rows="3" animated :loading="isLoading">
        <template #default>
          <div v-if="!isFailed">
            <div v-if="!noData">
              <el-check-tag
                v-for="tag in tagList"
                :key="tag.id"
                :checked="!selectedTagsId.includes(tag.id)"
                type="success"
                @change="selectTag(tag.id)"
                style="margin-right: 10px; margin-bottom: 5px"
              >
                {{ tag.content }}
              </el-check-tag>
              <el-button type="primary" :icon="Refresh" circle style="float: right; margin-right: 10px;" @click="reset"/>
            </div>
            <div v-else id="no-data">
              <el-text class="mx-1" type="primary">没有标签</el-text>
            </div>
          </div>
          <div v-else>
            <el-empty description="加载失败" style="height: 100px" :image-size="80" />
          </div>
        </template>
      </el-skeleton>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue"
import emitter from "@/utils/mitt"
import { getAllTagApi } from "@/api/data-manager/tagApi"
import { ElMessage } from "element-plus";
import { Refresh } from "@element-plus/icons-vue";

const isFailed = ref<boolean>(false)
const isLoading = ref<boolean>(true)
const noData = ref<boolean>(false)

const tagList = ref<any[]>([])
const selectedTagsId = ref<any[]>([])

onMounted(() => {
  setTimeout(async () => {
    let res
    try {
      res = await getAllTagApi()
    } catch (error) {
      isFailed.value = true
      isLoading.value = false
      return
    }
    if (res.data && res.data.length > 0) {
      tagList.value = res.data || []
    } else {
      noData.value = true
    }
    isLoading.value = false
  })
})

function getContent(id: string): string {
  for (let tag of tagList.value) {
    if (tag.id === id) {
      return tag.content
    }
  }
  return ""
}
function selectTag(id: string) {
  selectedTagsId.value.includes(id) ? removeTag(id) : selectedTagsId.value.push(id)
}

function removeTag(id: string) {
  selectedTagsId.value.splice(selectedTagsId.value.indexOf(id), 1)
}

function handleFilter() {
  if (selectedTagsId.value && selectedTagsId.value.length > 0) {
    emitter.emit("DM:filter-image-start", {
      data: selectedTagsId.value,
      content: selectedTagsId.value.map((tag) => getContent(tag))
    })
  } else {
    ElMessage.warning("请选择筛选标签")
  }
}

function reset() {
  selectedTagsId.value = []
  emitter.emit("DM:refresh")
}
</script>

<style lang="scss" scoped>
.filter-container {
  display: flex;
  justify-content: center;
  margin-top: 15px;
  user-select: none;
  .box-card {
    width: 800px;
    background-color: #e5eaf3;
    :deep(.el-card__header) {
      border-bottom: 1px solid gray;
    }
  }
  #no-data {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
